<template>
    <div class="login-page">
        <div class="left">
            <div class="tab">
                <div 
                v-for="tab in tabs" 
                :key="tab.id"
                @click="tabClick(tab.id)"
                :class="active == tab.id ? 'activeTab' : ''"
                class="tab-item">
                {{tab.title}}
                </div>
            </div>
            <div class="login-con">
                <form-login v-if="active == 1"></form-login>
                <face-login v-if="active == 0"></face-login>
            </div>

        </div>
        <div class="right">
            <div 
            @click="goHomePage" 
            title="返回首页"
            class="go-home"></div>
            <!-- <div class="title">工器具管理系统</div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        // 两种登陆方式
        this.tabs = [{
            id: 0,
            title: '面容登录'
        },{
            id: 1,
            title: '密码登录'
        }]
        return {
            active: 0,
        };
    },
    components: {
        // 登录表单组件
        'form-login': () => import('@/components/login/form-login'),
        // 面容识别组件
        'face-login': () => import('@/components/login/face-login')
    },
    methods: {
        
        // 返回首页
        goHomePage () {
            this.$router.push('/home').catch({})
        },

        // 点击切换登陆方式
        tabClick (id) {
            this.active = id;
        }
    },
    created() {},
    mounted() {

    },
};
</script>

<style lang="scss">
.login-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(50% 91% at 0 0, #202C40 0%, #0E1420 91%);

    .left {
        width: 64.6%;
        height: 100%;
        background: transparent;
        float: left;
        /*56px+8.2% */
        .tab {
            width: 100%;
            height: 56px;
            margin-top: 8.2%;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                width: 4px;
                height: 48px;
                background: #D8D8D8;
                top: 4px;
                left: 50%;
                margin-left: -2px;
            }

            .tab-item {
                width: 50%;
                height: 56px;
                box-sizing: border-box;
                line-height: 56px;
                font-size: 40px;
                color: #1E68CA;
                letter-spacing: 0;
                font-weight: 400;
                float: left;
                cursor: pointer;

                &:first-child {
                    padding-right: 50px;
                    text-align: right;
                }

                &:nth-child(2) {
                    padding-left: 50px;
                }
            }
            .activeTab {
                color: #FFFFFF;
                font-weight: 600;
            }
        }

        .login-con {
            width: 100%;
            height: calc(91.8% - 56px);
        }
    }
    
    .right {
        width: 35.4%;
        height: 100%;
        float: right;
        background: url('../../assets/login-bg.png') no-repeat center center;
        background-size: 100% 100%;
        position: relative;

        .go-home {
            position: absolute;
            width: 32px;
            height: 32px;
            background: url('../../assets/home.png') no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            top: 44px;
            right: 41px;
            cursor: pointer;
        }

        .title {
            position: absolute;
            top: 97px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 44px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 600;
        }
    }
    

    &__form {
        width: 410px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .el-form {
            .el-button {
                width: 100%;
            }
        }

        .loading-box {
            width: 240px;
            margin: 0 auto;

            .loading-pic {
                width: 90px;
                height: 90px;
                margin: 20px auto 30px auto;
                background: url("../../assets/loading_pic.png") no-repeat;
                background-size: contain;
                animation: change 2s linear infinite;
            }

            .loading-text {
                color: #fff;
                font-size: 24px;
                font-weight: bold;
                text-align: center;
            }
        }

        .sys-title {
            width: 410px;
            height: 56px;
            color: #fff;
            text-align: center;

            &__cn {
                font-size: 41px;
                font-weight: bold;
                line-height: 50px;
                margin: 44px auto 11px auto;
            }

            &__en {
                font-size: 25px;
                font-weight: bold;
                color: #6b6d81;
                line-height: 35px;
            }
        }
    }
}

</style>
